<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>教室 & 教师 查询系统</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
    h1 { text-align: center; }
    .search-box { margin: 10px 0; }
    input { padding: 8px; width: 200px; }
    button { padding: 8px 12px; margin-left: 5px; }
    .results { margin-top: 20px; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    .item { margin-bottom: 10px; padding: 8px; border-bottom: 1px solid #ddd; }
  </style>
</head>
<body>
  <h1>教室 & 教师 查询系统</h1>

  <div class="search-box">
    <input id="teacherInput" type="text" placeholder="输入教师姓名">
    <button onclick="searchTeacher()">查教师</button>
  </div>

  <div class="search-box">
    <input id="roomInput" type="text" placeholder="输入教室">
    <button onclick="searchRoom()">查教室</button>
  </div>

  <div id="results" class="results"></div>

  <script>
  let data = [];

  // 确保数据加载完成后再可用
  fetch('data.json')
    .then(res => res.json())
    .then(json => {
      data = json;
      console.log("数据加载完成，共", data.length, "条");
    });

  function searchTeacher() {
    const name = document.getElementById('teacherInput').value.trim().toLowerCase();
    if (!name) return alert("请输入教师姓名！");
    const results = data.filter(item =>
      String(item["teacher"]).toLowerCase().includes(name)
    );
    showResults(results, `教师: ${name}`);
  }

  function searchRoom() {
    const room = document.getElementById('roomInput').value.trim().toLowerCase();
    if (!room) return alert("请输入教室！");
    const results = data.filter(item =>
      String(item["Location"]).toLowerCase().includes(room)
    );
    showResults(results, `教室: ${room}`);
  }

  function showResults(results, title) {
    const container = document.getElementById('results');
    if (results.length === 0) {
      container.innerHTML = `<h3>${title}</h3><p>没有找到相关结果</p>`;
      return;
    }
    container.innerHTML = `<h3>${title}</h3>` + results.map(r => `
      <div class="item">
        <strong>${r["Class ID"]}</strong><br>
        Rotation Day: ${r["Rotation Day Number"]}, Period: ${r["Period Number"]}<br>
        教室: ${r["Location"]} | 教师: ${r["teacher"]}
      </div>
    `).join('');
  }
</script>

</body>
</html>
